<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
   #app{
     width: 500px;
   }
   table{
     width: 100%;
     border-collapse: collapse;
   }
   table tr th,table tr td{
     height: 35px;
     border-bottom: solid 1px #999;
     text-align: center;
   }
  </style>
</head>
<body>
<div id="app">
  <table >
    <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(obj,index) in arr">
      <td>{{obj.userId}}</td>
      <td>{{obj.userName}}</td>
      <td>{{obj.userAge}}</td>
      <td>
        <button type="button" @click="del(index)">删除</button>
      </td>
    </tr>
     <tr>
      <td colspan="4">
        <button type="button" @click="clear()">清空</button>
      </td>
    </tr>
    </tbody>
  </table>
  <h2>添加</h2>
    姓名:<input type="text" v-model="userName"><br>
    年龄:<input type="text" v-model="userAge"><br>
    <button @click="add()">添加</button><br>
</div>
<script src="vue.global.js"></script>
<script>
   const vue=Vue.createApp({
    data(){
      return{
        arr:[
          {
            userId:1,
            userName:'张三',
            userAge:20
          },{
            userId: 2,
            userName: '李四',
            userAge: 21
          },{
            userId: 3,
            userName: '王五',
            userAge: 22
          }
        ],
        userName:'',
        userAge:0
      }
      },
    methods:{
      add(){
        console.log(this.userName)
        let userId =0;
        //判断数组中是否有数据，没有就从1开始
        if (this.arr.length == 0){
             userId =1;
        }else {
          //将数组中，根据前一个数的id得到下一个
          userId = this.arr[this.arr.length-1].userId+1;
        }
        this.arr.push({
          userId:userId,
          userName:this.userName,
          userAge:this.userAge
        });
      },
      //删除功能的实现
        del(index){
          this.arr.splice(index,1)
        },
        clear() {
          this.arr.splice(0,this.arr.length)
        }
    }
  }).mount("#app");
</script>
</body>
</html>